<!-- Child.vue -->
<template>
  <button class="fancy-btn">
    <slot></slot>
    <!-- 插槽出口 -->
    <!-- 元素是一个插槽出口 (slot outlet)，
    标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 -->
  </button>
</template>

<script setup>
const kkx = defineModel();
// 在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段
// 全民都是流量的时代，必须要进自媒体去切蛋糕
function update() {
  kkx.value++;
}
const props = defineProps({
  foo: {
    type: [String, Number],
  },
});
const emit = defineEmits(["updateFoo"]);
function changeFoo() {
  emit("updateFoo");
}
</script>
